<template>  
    <view class="container">  
		<view class="top-part">
			<view class="list-top">
				<view class="info-left" style="padding-top:70rpx;">
					<image style="width: 140rpx; height: 140rpx;"  src="/static/imgnew/touxiang.png"></image>
				</view>
				<view class="info-center">
					<image style="width: 324rpx; height: 60rpx;"  src="/static/imgnew/xiangzhuangjiehe.png"></image>
					<view class="username">{{user.username}}</view>
					<view class="info-item">
						<image style="width: 60rpx; height: 60rpx;"  src="/static/imgnew/icon_Workplace.png"></image>
						<text>{{user.roleList.map(item=>{return item.remark}).join(',')}}</text>
					</view>
					<!-- <view class="info-item">
						<image style="width: 60rpx; height: 60rpx;"  src="/static/imgnew/icon_Post.png"></image>
						<text>{{user.username}}</text>
					</view> -->
					<view class="info-item">
						<image style="width: 60rpx; height: 60rpx;"  src="/static/imgnew/icon_Number.png"></image>
						<text>{{user.telephone}}</text>
					</view>
				</view>
				<view class="info-right8">
					<!-- <image style="width: 60rpx; height: 60rpx;"  src="/static/imgnew/icon_Workplace.png"></image> -->
					<!-- <text>编辑资料</text> -->
				</view>
			</view>
			
			
			
			<view class="list-num">
				<view class="num-item">
					<view class="top">-</view>
					<view>签到</view>
				</view>
				<view class="num-item">
					<view class="top">-</view>
					<view>出差</view>
				</view>
				<view class="num-item">
					<view class="top">-</view>
					<view>请假</view>
				</view>
				<view class="num-item">
					<view class="top">-</view>
					<view>外出办事</view>
				</view>
			</view>
			
		</view>
		
		<view style="margin:60rpx auto 0 auto;width: 654rpx; height: 200rpx;">
			<image style="width: 654rpx; height: 200rpx;"  src="/static/imgnew/ubg.png"></image>
		</view>
		
		
		<view style="margin:60rpx auto 0 auto;width: 564rpx; height: 186rpx;">
			<image @tap="logout" style="width: 564rpx; height: 186rpx;"  src="/static/imgnew/tcbg.png"></image>
		</view>
		
    </view>  
</template>  
<script>  
	
	
    import {  
        mapState 
    } from 'vuex';  
	
    export default {
		
		data(){
			return {
				user:{}
				
			}
		},
		
		onLoad(){
			this.user=JSON.parse(uni.getStorageSync("userinfo"))
			
		},
		
		
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.enterpage('../xiugaimima/index')
			}else if(index === 1){
				this.enterpage('../xiugaimima/index')
				
			}
		},
		
      
        methods: {

			logout(){
				uni.reLaunch({
					url: '../login/index'
				});
			},
			enterpage(path){
				uni.navigateTo({
					url: path
				});
			}
		
			
			
        }  
    }  
</script>  
<style>
	.info-center{
		
	}
	.info-right{
		color:#FF842F;
		width: 146rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		height: 42rpx;
		background: rgba(255,132,47,0.2);
		border-radius: 16rpx;
	}
	.info-center .info-item{
		display:flex;
		padding-left:20rpx;
		align-items: center;
	}
	
	.info-center .username{
		padding-left:20rpx;
		font-weight: bold;
		font-size: 32rpx;
	}
	page{
		padding-top:30rpx;
		height:100%;
		width:100%;
		overflow: hidden;
		background:url(/static/imgnew/userbg.png) no-repeat center 0 #D4E5FF;
		background-size:100% 373rpx;
	}
	
	.top-part{
		box-sizing: border-box;
		padding:20rpx 30rpx 0 30rpx;
		width: 674rpx;
		height: 489rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin:0 auto;
	}
	
	.top-part .list-top{
		box-sizing: border-box;
		display:flex;
		justify-content:space-around;
		padding-top:20rpx;
		
	}
	.top-part .list-num{
		margin-top:40rpx;
		text-align: center;
		box-sizing: border-box;
		display:flex;
		justify-content:space-around;
	}
	
</style>